import 'package:demo/utils/ColorUtils.dart';
import 'package:demo/utils/ToastUtils.dart';
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:flutter_swiper_view/flutter_swiper_view.dart';

import 'LocationWidget.dart';

final List<String> images = [
  'images/banner_image1.png',
  'images/banner_image2.png',
  'images/banner_image3.png',
  'images/banner_image4.png',
  'images/banner_image5.png',
];
final List<String> diamonds = [
  '入会转会',
  '新业态入会',
  '爱心驿站',
  '工会经费',
  '场馆预约',
  '职工之家',
  '法律服务',
  '心理咨询',
  '医疗补助',
  '更多应用',
];

class HomeWidget extends StatefulWidget {
  const HomeWidget({super.key});

  @override
  State<StatefulWidget> createState() {
    return _HomeWidget();
  }
}

class _HomeWidget extends State<HomeWidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Container(
            decoration: const BoxDecoration(
              image: DecorationImage(
                image: AssetImage(
                  'images/icon_top_background.png',
                ),
                fit: BoxFit.fill,
              ),
            ),
            child: SafeArea(
              child: topView(),
            ),
          ),
          getDiamond(),
          getNotice(),
          getLatest()
        ],
      ),
    );
  }

  ///头部信息
  Widget topView() {
    return Padding(
      padding: const EdgeInsets.fromLTRB(16, 12, 16, 0),
      child: Column(
        children: [
          topTitle(),
          const SizedBox(
            height: 16,
          ),
          getBanner(),
        ],
      ),
    );
  }

  ///头部定位
  Widget topTitle() {
    return Row(
      children: [
        GestureDetector(
          child: const Row(
            children: [
              Icon(
                Icons.location_on,
                size: 18,
                color: Colors.white,
              ),
              Text("郑州市总工会",
                  style: TextStyle(
                    color: Colors.white,
                  )),
              // Expanded(
              //   child: Icon(
              //     Icons.arrow_drop_down,
              //     size: 18,
              //     color: Colors.blue,
              //   ),
              // ),
              Icon(
                Icons.arrow_drop_down,
                size: 18,
                color: Colors.white,
              ),
            ],
          ),
          onTap: (){
            Navigator.push(context,
                MaterialPageRoute(builder: (context) => const LocationWidget()));
          },
        ),
        const Spacer(
          flex: 1,
        ),
        const Icon(
          Icons.search,
          size: 18,
          color: Colors.white,
        ),
      ],
    );
  }

  /// 轮播图
  Widget getBanner() {
    return SizedBox(
      height: 150,
      child: Swiper(
        itemCount: images.length,
        //自动播放
        autoplay: true,
        autoplayDisableOnInteraction: true,
        index: 1,
        // 当前视窗展示比例 小于1可见上一个和下一个视窗
        viewportFraction: 0.9,
        // 两张图片之间的间隔
        scale: 0.95,
        pagination: const SwiperPagination(
          alignment: Alignment.bottomCenter,
          margin: EdgeInsets.symmetric(vertical: 10),
          builder: RectSwiperPaginationBuilder(
            color: Colors.black38,
            activeColor: Colors.white,
          ),
        ),
        itemBuilder: (BuildContext context, int index) {
          return Container(
            //超出部分剪裁
            clipBehavior: Clip.hardEdge,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(4),
            ),
            child: Image.asset(
              images[index],
              fit: BoxFit.fill,
            ),
          );
        },
        onTap: (index) {
          ToastUtils.show(images[index]);
        },
      ),
    );
  }

  /// 金刚区
  Widget getDiamond() {
    return MasonryGridView.count(
      padding: const EdgeInsets.fromLTRB(16, 12, 16, 0),
      itemCount: diamonds.length,
      shrinkWrap: true,
      //本身不滚动
      physics: const NeverScrollableScrollPhysics(),
      crossAxisCount: 5,
      crossAxisSpacing: 20,
      mainAxisSpacing: 10,
      itemBuilder: (context, index) {
        return GestureDetector(
          child: Column(
            children: [
              Image.asset(
                'images/icon_diamond.png',
                fit: BoxFit.fill,
                width: 32,
                height: 32,
              ),
              const SizedBox(
                height: 8,
              ),
              Text(diamonds[index],
                  style:
                      const TextStyle(color: Color(0xff2E3742), fontSize: 12))
            ],
          ),
          onTap: () {
            ToastUtils.show(diamonds[index]);
          },
        );
      },
    );
  }

  Widget getNotice() {
    return Container(
      decoration: BoxDecoration(
        color: ColorUtils.getColor("#FFF8F8"),
        border: Border.all(width: 0.5, color: Colors.redAccent),
        borderRadius: BorderRadius.circular(6),
      ),
      margin: const EdgeInsets.fromLTRB(16, 24, 16, 0),
      padding: const EdgeInsets.fromLTRB(0, 6, 12, 6),
      child: Row(
        children: [
          Image.asset(
            "images/icon_notice.png",
            width: 52,
            height: 24,
          ),
          const SizedBox(
            width: 12,
          ),
          const Expanded(
            child: Text(
              "热烈欢迎省委领导来我市考察热烈欢迎省委领导来我市考察热烈欢迎省委领导来我市考察热烈欢迎省委领导来我市考察热烈欢迎省委领导来我市考察",
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              style: TextStyle(
                color: Color(0xff626C78),
                fontSize: 14,
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget getLatest() {
    return Container(
        height: 240,
        clipBehavior: Clip.hardEdge,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(6),
        ),
        margin: const EdgeInsets.fromLTRB(16, 15, 16, 0),
        child: IntrinsicHeight(
          child: ListView.separated(
            itemCount: 5,
            scrollDirection: Axis.horizontal,
            shrinkWrap: true,
            itemBuilder: (context, index) {
              return Container(
                clipBehavior: Clip.hardEdge,
                width: 310,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(6),
                  color: ColorUtils.getColor("#FAFAFA"),
                  // color: ColorUtils.getColor("#888999"),
                ),
                child: GestureDetector(
                  child: Column(
                    children: [
                      Stack(
                        children: [
                          Image.asset(
                            "images/banner_image1.png",
                            fit: BoxFit.fill,
                            height: 130,
                            width: double.infinity,
                          ),
                          Container(
                            margin: const EdgeInsets.all(8),
                            padding: const EdgeInsets.all(4),
                            decoration: BoxDecoration(
                              color: ColorUtils.getColor("#EF3A43"),
                              borderRadius: BorderRadius.circular(2),
                            ),
                            child: const Text(
                              "进行中",
                              style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 12,
                                  height: 1.0),
                            ),
                          )
                        ],
                      ),
                      Container(
                        alignment: Alignment.centerLeft,
                        margin: const EdgeInsets.fromLTRB(16, 12, 16, 16),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.stretch,
                          children: [
                            Text(
                              "【党建在线】以党建活动为载体",
                              maxLines: 2,
                              overflow: TextOverflow.ellipsis,
                              textAlign: TextAlign.left,
                              style: TextStyle(
                                  color: ColorUtils.getColor("#1B2129"),
                                  fontSize: 16),
                            ),
                            const SizedBox(
                              height: 8,
                            ),
                            Row(
                              children: [
                                Image.asset(
                                  "images/icon_clock.png",
                                  width: 16,
                                  height: 16,
                                ),
                                Expanded(
                                  child: Text(
                                    "2023年6月15 ~ 7月20",
                                    style: TextStyle(
                                        color: ColorUtils.getColor("#8A939E"),
                                        fontSize: 14),
                                  ),
                                ),
                                Container(
                                  margin: const EdgeInsets.fromLTRB(8, 0, 0, 0),
                                  padding: const EdgeInsets.all(4),
                                  decoration: BoxDecoration(
                                    color: ColorUtils.getColor("#EF3A43"),
                                    borderRadius: BorderRadius.circular(2),
                                  ),
                                  child: const Text(
                                    "立即报名",
                                    style: TextStyle(
                                        color: Colors.white, fontSize: 12),
                                  ),
                                )
                              ],
                            )
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              );
            },
            separatorBuilder: (BuildContext context, int index) {
              return const SizedBox(
                width: 10,
              );
            },
          ),
        ));
  }
}
